<template>
  <div class="todo-header">
	  <div>
		  <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="handleKeyup"/>
		  <List />
		  <Footer />
	  </div>
    <router-view />
  </div>
</template>
<script>
	import {nanoid} from "nanoid"
	import List from "./components/List";
	import Footer from "./components/Footer";
	export default {
		components: {List,Footer},
		data(){
			return {
			   // one : console.log(this.$store.state.one)
			}
		},
		computed:{
			// name(){
			// 	 return console.log(this.$store.state.name)
			// }
		},
		methods:{
			handleKeyup(event){
				if(!event.target.value.trim()) return;
				const todoObj = {
					id:nanoid(),
					title:event.target.value,
					done:false
				};
				this.$store.commit("Add_todo",todoObj);
				event.target.value = "";
			}
		}
	}
</script>
<style scoped>
	.todo-header input {
		width: 560px;
		height: 28px;
		font-size: 14px;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 4px 7px;
	}

	.todo-header input:focus {
		outline: none;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>
